<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./iconfont/iconfont1/iconfont.css">
    <link rel="stylesheet" href="swiper.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            width: 1200px;
            margin: 0 auto;
            /* background-color: pink; */
            overflow: hidden;
        }

        .pic1 {
            /* width: 130px; */
            height: 54px;
            margin-top: 70px;
            display: block;
            float: left;
        }

        header ul {
            float: right;
            list-style: none;
            top: -20px;
        }

        header ul li {
            float: left;
            margin-right: 10px;
            padding-right: 10px;
            border-right: 1px solid #dddddd;
        }

        .pic2 {
            float: left;
            height: 20px;
            width: 20px;

        }

        .kuang1 {
            float: left;
            width: 500px;
            height: 45px;
            border-radius: 10px 0px 0px 10px;
            border: none;
            /* border: 1px solid #00d0d4; */
            border-top: 1px solid #00d0d4;
            border-left: 1px solid #00d0d4;
            border-bottom: 1px solid #00d0d4;
            /* border-right: none; */
            box-sizing: border-box;
            margin-left: 165px;
            margin-top: 15bpx;
            margin-top: 46px;
            outline: none;

        }

        .dajing {
            float: left;
            width: 71px;
            height: 45px;
            background-image: linear-gradient(to right, #00ced2, #1ed8cc, #3fe2c3, #5eebb7, #7ef3aa);
            margin-top: 46px;
            text-align: center;
            line-height: 45px;
            font-size: 25px;
            color: white;
        }

        aside {
            width: 35px;
            height: 1080px;
            background-color: #7c8994;
            position: fixed;
            top: 0;
        }

        /* aside div {
            border: 1px solid black;
        } */

        aside div:nth-of-type(1) {
            width: 35px;
            height: 50px;
            font-size: 25px;
            text-align: center;
        }

        aside div:nth-of-type(2) {
            width: 35px;
            height: 50px;
            font-size: 25px;
            text-align: center;
            margin-top: 230px;
        }

        aside div:nth-of-type(3) {
            margin-top: 60px;
            width: 35px;
            height: 50px;
            font-size: 25px;
            text-align: center;
        }

        aside div:nth-of-type(4) {
            margin-top: 20px;
            width: 35px;
            height: 50px;
            font-size: 25px;
            text-align: center;
        }

        aside div:nth-of-type(5) {
            margin-top: 20px;
            width: 35px;
            height: 50px;
            font-size: 25px;
            text-align: center;
        }

        aside div:nth-of-type(6) {
            margin-top: 260px;
            width: 35px;
            height: 50px;
            font-size: 25px;
            text-align: center;
        }

        aside span {
            font-size: 15px;
        }

        .nav {
            height: 44px;
            background-image: linear-gradient(to right, #00ced2, #1ed8cc, #3fe2c3, #5eebb7, #7ef3aa);
        }

        .nav-list {
            width: 1200px;
            margin: 0 auto;
        }

        .nav-list ul {
            width: 725px;
            display: flex;
            justify-content: space-between;
        }

        .nav-list li {
            list-style: none;
            text-align: center;
            line-height: 44px;
        }

        .bianse {
            background-color: #00bcd4;
        }

        .box-tb {
            height: 53px;
            width: 1200px;
            margin: 0 auto;
            /* background-color: blue; */
        }



        .kefu {
            display: block;
            width: 45px;
            height: 45px;
            background-color: #fdf5ec;
            float: left;
            margin-left: 70PX;
            margin-top: 45PX;
        }

        .ppp {
            float: left;

            /* margin-left: 45px; */
            font-size: 12px;
            color: #757575;
        }

        .ppp1 {
            margin-top: 45PX;
        }

        .ppp2 {
            margin-top: 10px;
        }

        .haoma {
            display: block;
            float: right;
            color: #00d0d4;
        }

        .se {
            color: #00d0d4;
        }

        .ma1 {
            margin-left: 72px;
        }

        .ma2 {
            margin-left: 5px;
        }

        .icon-kefu {
            font-size: 32px;
            color: #ff8300;
            text-align: center;
            line-height: 45px;
        }

        .box-tb .item:nth-child(n+2) {
            display: none;
        }

        .item {
            line-height: 53px;
        }

        main {
            height: 320px;
            width: 1200px;
            margin: 0 auto;
            /* background-color: pink; */
        }

        .left1 {
            width: 722px;
            height: 320px;
            border: 6px solid #00d0d4;
            box-sizing: border-box;
        }

        .box-th1 {
            list-style: none;
            width: 72px;
            height: 308px;
            background-color: #00d0d4;
            color: white;
            text-align: center;
            line-height: 43px;
            font-size: 17px;
            float: left;
        }

        .bai {
            background-color: white;
            color: #00d0d4;
        }

        .box-tb1 .item1:nth-child(n+2) {
            display: none;
        }

        .items2:nth-child(n+2) {
            display: none;
        }

        .left1 {
            float: left;
        }

        .right1 {
            float: right;
        }

        section {
            width: 1200px;
            margin: 0 auto;
        }

        section img {
            width: 225px;
            height: 300px;
        }

        section ul {
            width: 1200px;
            display: flex;
            justify-content: space-between;
            list-style: none;
            flex-wrap: wrap;
        }



        body {
            position: relative;
        }

        #adv {
            position: absolute;
            width: 50px;
            height: 200px;
            top: 541px;
            left: 0;
            margin-left: 300px;
        }

        #adv ul li {
            list-style: none;
            border-bottom: 1px solid #9e9e9e;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 19px;
        }

        .ctry {
            width: 1200px;
            height: 73px;
            margin: auto;
        }

        .ctry p {
            float: left;
            margin-right: 50px;
            line-height: 73px;
        }

        .ctryon {
            color: #00bcd4;
            border-bottom: 1px solid #00bcd4;
        }

        .luoboa {
            width: 1200px;
            margin: 0 auto;
            /* background-color: pink; */
            height: 288px;
        }

        .swiper {
            width: 945px;
            height: 288px;
        }

        .swiper-slide {
            float: left;
            /* font-size: 18px; */

        }

        .swiper {
            float: left;
        }

        .swiper-slide img {
            display: block;
            width: 945px;
            height: 288px;
            /* object-fit: cover; */
        }

        .lunbo {
            width: 945px;
            height: 288px;
        }

        /* 左侧悬浮变色 */
        .bianla {
            color: #00bcd4;
        }

        body {
            height: 3000px;
        }

        .zi {
            background-color: #ffffff;
            /* padding: 20px; */
            width: 255px;
            height: 288px;
            float: right;
            /* padding-left: 30px; */
            /* margin-left: 30px; */
        }
    </style>
</head>

<body>
    <header>
        <img src="images/logo.png" class="pic1">
        <ul>
            <img src="images/老人.png" class="pic2">
            <li> 适老化及无障碍</li>
            <li>请<a href="02login.html" class="se zhuce">登录</a>或<a href="01regist.html" class="se denglu">免费注册</a></li>
            <li>消息</li>
            <li>查看订单</li>
            <li>积分商城</li>
            <li>联系客服</li>
        </ul>
        <input type="text" class="kuang1">
        <p class="dajing iconfont icon-fangdajing"></p>
        <span class="kefu iconfont icon-kefu"></span>
        <p class="ppp ppp1">国内客服<span class="haoma ma1">95117</span></p>
        <p class="ppp ppp2">国际客服<span class="haoma ma2">(+8610)59606999</span></p>
    </header>
    <aside>
        <div style="color: white;" class="xx">x</div>
        <div class="iconfont icon-yonghu" style="color: white;"></div>
        <div class="iconfont icon-envelope" style="color: white;"> <span>消息</span></div>
        <div class="iconfont icon-zhengguifapiao" style="color: white;"><span>订单</span></div>
        <div class="iconfont icon-zhanghuyue" style="color: white;"><span>账户</span></div>
        <div class="iconfont icon-erweima" style="color: white;"><span>扫码</span></div>
    </aside>
    <div class="nav">
        <div class="nav-list">
            <ul class="box-th">
                <li data-index="0" class="bianse">首页</li>
                <li data-index="1">机票</li>
                <li data-index="2">酒店</li>
                <li data-index="3">火车票</li>
                <li data-index="4">度假</li>
                <li data-index="5">团购</li>
                <li data-index="6">门票</li>
                <li data-index="7">当地人</li>
                <li data-index="8">汽车票</li>
                <li data-index="9">行程设计</li>
                <li data-index="10">攻略</li>
                <li data-index="11">旅游快讯</li>
            </ul>
        </div>

    </div>
    <div class="box-tb">
        <div class="item">境外直通车 境外酒店 海外玩乐</div>
        <div class="item">机票首页低价机票</div>
        <div class="item">国内港澳台酒店 境外酒店</div>
        <div class="item">境外直通车 境外酒店 海外玩乐</div>
        <div class="item">度假首页 海外玩乐自由行</div>
        <div class="item">度假团购 周边休闲</div>
        <div class="item">境内门票 休闲一日游</div>
        <div class="item">当地人首页</div>
        <div class="item">境外直通车 境外酒店 海外玩乐</div>
        <div class="item">境外直通车 境外酒店 海外玩乐</div>
        <div class="item">攻略首页</div>
        <div class="item">旅游快讯首页</div>
    </div>
    <main>
        <div class="left1">
            <ul class="box-th1">
                <li data-index1="0" class="bai">机票</li>
                <li data-index1="1">酒店</li>
                <li data-index1="2">火车票</li>
                <li data-index1="3">度假</li>
                <li data-index1="4">门票</li>
                <li data-index1="5">团购</li>
                <li data-index1="6">自由行</li>
            </ul>
            <div class="box-tb1">
                <img src="images/未标题-1.png" class="item1">
                <img src="images/未标题-2.png" class="item1">
                <img src="images/未标题-3.png" class="item1">
                <img src="images/未标题-4.png" class="item1">
                <img src="images/未标题-5.png" class="item1">
                <img src="images/未标题-6.png" class="item1">
                <img src="images/未标题-7.png" class="item1">
            </div>

        </div>
        <div class="right1">
            <img src="images/未标题-8.png" alt="">
        </div>

    </main>
    <div id="adv">
        <ul>
            <li class="iconfont icon-lvxing   one1"></li>
            <li class="iconfont icon-jiudian one2"></li>
            <li class="iconfont icon-dujia one3"></li>
            <li class="iconfont icon-mayata one4"></li>
            <li class="iconfont icon-shu one5"></li>
        </ul>
    </div>
    <div class="ctry">
        <p class="ctryon" data-index2="0"> 国内低价机票</p>
        <p data-index2="1">国际港澳台低价航线（单程）</p>
        <p data-index2="2">国际港澳台低价（往返）</p>
    </div>
    <section>
        <ul id="product" class="items2"></ul>
        <ul id="product1" class="items2"></ul>
        <ul id="product2" class="items2"></ul>
    </section>
    <div class="luoboa">
        <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../去哪儿/images/轮播2.jpg" class="lunbo"></div>
                <div class="swiper-slide"><img src="../去哪儿/images/轮播1.jpg" class="lunbo"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="zi">
            <p>旅行资讯</p>
            <p>中华人民共和国外交部安全提醒 <br>

                反网络诈骗专栏<br>

                去哪儿网已通过支付卡产业数据安全标准<br>

                “放心消费在社区”系列活动<br>

                全国旅游投诉渠道</p>
            <p>旅行小贴士</p>
            <p>去哪儿网郑重承诺"诚信经营 放心消费"<br>

                叮~出游小贴士请查收</p>
        </div>
    </div>

</body>
<script src="swiper.js"></script>
<script src="startMove.js"></script>
<script src="ajax.js"></script>
<script>
    let one1 = document.querySelector('.one1')
    let one2 = document.querySelector('.one2')
    let one3 = document.querySelector('.one3')
    let one4 = document.querySelector('.one4')
    let one5 = document.querySelector('.one5')
    let zhuce = document.querySelector('#zhuce')
    let items2 = document.querySelector('section').querySelectorAll('.items2')
    let op = document.querySelector('.ctry').querySelectorAll('p')
    let oUl = document.querySelector('#product')
    let oUl1 = document.querySelector('#product1')
    let oUl2 = document.querySelector('#product2')
    let aside = document.querySelector('aside')
    let xx = document.querySelector('.xx')
    let items1 = document.querySelector('.box-tb1').querySelectorAll('.item1')
    let list1 = document.querySelector('.box-th1').querySelectorAll('li')
    let list = document.querySelector('.box-th').querySelectorAll('li')
    let items = document.querySelector('.box-tb').querySelectorAll('.item')
    // 轮播图
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });



    //商品数据
    for (var i = 0; i < op.length; i++) {
        op[i].onmousemove = function () {
            for (var i = 0; i < op.length; i++) {
                op[i].className = ""
            } this.className = 'ctryon'
            var index2 = this.getAttribute('data-index2')
            for (var i = 0; i < items2.length; i++) {
                items2[i].style.display = 'none'
            }
            items2[index2].style.display = 'flex'
        }
    }
    //导航栏模块!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    for (var i = 0; i < list.length; i++) {
        list[i].onmousemove = function () {
            for (var i = 0; i < list.length; i++) {
                list[i].className = ''
            }
            this.className = 'bianse'
            var index = this.getAttribute('data-index')
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none'
            }
            items[index].style.display = 'block'
        }
    }
    // 机票模块
    for (var i = 0; i < list1.length; i++) {
        list1[i].onmousemove = function () {
            for (var i = 0; i < list1.length; i++) {
                list1[i].className = ''
            }
            this.className = 'bai'
        }
    }
    for (var i = 0; i < list1.length; i++) {
        list1[i].onclick = function () {
            for (var i = 0; i < list1.length; i++) {
                list1[i].className = ''
            }
            this.className = 'bai'
            var index1 = this.getAttribute('data-index1')
            for (var j = 0; j < items1.length; j++) {
                items1[j].style.display = 'none'
            }
            items1[index1].style.display = 'block'
        }
    }

    xx.onclick = function () {
        aside.style.display = 'none'
    }
    // 买卖模块请求数据
    const baseUrl = "http://localhost:8888";
    ajax({
        url: baseUrl + "/goods/list",
        type: "get",
        params: { current: 1, pagesize: 5 },
        fn(resData) {
            console.log(JSON.parse(resData));
            resData = JSON.parse(resData);
            let html = "";
            resData.list.forEach((o) => {
                html += `
            <li>
                <a href="04detail.html?pid=${o.goods_id}"><img src="${o.img_big_logo}"/></a>
               
                
                </li>
            
            `;
            });
            oUl.innerHTML = html;
        },
    });
    ajax({
        url: baseUrl + "/goods/list",
        type: "get",
        params: { current: 3, pagesize: 5 },
        fn(resData) {
            console.log(JSON.parse(resData));
            resData = JSON.parse(resData);
            let html = "";
            resData.list.forEach((o) => {
                html += `
            <li>
                <a href="04detail.html?pid=${o.goods_id}"><img src="${o.img_big_logo}"/></a>
               
                
                </li>
            
            `;
            });
            oUl1.innerHTML = html;
        },
    });
    ajax({
        url: baseUrl + "/goods/list",
        type: "get",
        params: { current: 4, pagesize: 5 },
        fn(resData) {
            console.log(JSON.parse(resData));
            resData = JSON.parse(resData);
            let html = "";
            resData.list.forEach((o) => {
                html += `
            <li>
                <a href="04detail.html?pid=${o.goods_id}"><img src="${o.img_big_logo}"/></a>
               
              
                </li>
            
            `;
            });
            oUl2.innerHTML = html;
        },
    });
    //左侧悬浮栏
    var oAdv = document.getElementById("adv");
    window.onscroll = function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //scrollTop就是触发滚轮事件时滚轮的高度
        console.log(scrollTop);
        let max = 550 + scrollTop
        if (max < 660) {
            oAdv.style.top = max + 'px'
        } else {
            oAdv.style.top = 400 + 'px'
            oAdv.style.position = "fixed"
        }
        if (scrollTop < 300) {
            one2.style.color = ''
            one3.style.color = ''
            one4.style.color = ''
            one5.style.color = ''
            one1.style.color = 'pink'
        }
        if (scrollTop > 300) {
            one1.style.color = ''
            one3.style.color = ''
            one4.style.color = ''
            one5.style.color = ''
            one2.style.color = 'pink'
        }
        if (scrollTop > 500) {
            one1.style.color = ''
            one2.style.color = ''
            one4.style.color = ''
            one5.style.color = ''
            one3.style.color = 'pink'
        }
        if (scrollTop > 700) {
            one4.style.color = 'pink'
            one1.style.color = ''
            one2.style.color = ''
            one3.style.color = ''
            one5.style.color = ''
        }
        if (scrollTop > 900) {
            one4.style.color = ''
            one1.style.color = ''
            one2.style.color = ''
            one3.style.color = ''
            one5.style.color = 'pink'
        }

    }

</script>

</html>